import React, { useState } from 'react'
import { Table, Tooltip, Space, Button, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { updateafter, getafterdetail } from '../../../../request/api'
import Pop_up_layers from './Pop_up_layers'


export default function To_be_reviewed(props) {
    const { afterdata, getid, getall } = props

    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
    }

    const columns: TableColumnsType = [
        { title: '售后ID', dataIndex: 'key' },
        { title: '申请时间', dataIndex: 'Application_timeline' },
        { title: '关联订单', dataIndex: 'order_id' },
        { title: '所属用户', dataIndex: 'user' },
        { title: '自提点名称', dataIndex: 'zitidian' },
        { title: '退款金额', dataIndex: 'Refund_amount' },
        { title: '售后类型', dataIndex: 'After_sales_type' },
        { title: '售后原因', dataIndex: 'After_sales_type_cause' },
        { title: '驳回原因', dataIndex: 'Audits' },

        {
            title: '操作',
            key: '_id',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        Getafterdetail(record.key)
                    }}>查看 </a>
                </Space>
            ),
        },
    ];

    //   数据渲染
    const dataSource = afterdata.filter(ele => ele.After_sales_state == '已驳回').map((item) => ({
        key: item._id,
        Application_timeline: item.Application_timeline,
        order_id: item.order_id._id,
        user: item.order_id.name,
        zitidian: item.zitidian,
        Refund_amount: item.Refund_amount,
        After_sales_type: item.After_sales_type,
        After_sales_type_cause: item.After_sales_type_cause,
        Audits: item.Audits,
    }));





    const [model_type, setmodel_type] = useState(false)
    const updatmodel_type = (item: boolean) => {
        setmodel_type(item)
    }

    type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];









    // 获取详细数据售后数据
    const [after_data, setafter_data] = useState<any>({})
    const Getafterdetail = async (item) => {
        console.log(item);
        
        setmodel_type(true)
        const res = await getafterdetail({ _id:item})
        setafter_data(res.data)
    }




    return (
        <div>
            <Flex gap="middle" vertical>
                <Pop_up_layers model_type={model_type} updatmodel_type={updatmodel_type} after_data={after_data}></Pop_up_layers>
                <Table<DataType> columns={columns} dataSource={dataSource} />;
            </Flex>
        </div>
    )
}
